<template>
  <view class="site-parameter-settings">
    <site-basic-cell :name="siteName"></site-basic-cell>
    <view class="settings">
      <template v-for="(item, index) in settings" :key="index">
        <up-cell
          isLink
          :border="false"
          :title="item.title"
          @tap="handleAction(item)"
        >
          <template #icon>
            <image
              class="setting-icon"
              :src="item.icon"
              mode="aspectFill"
            ></image>
          </template>
        </up-cell>
      </template>
    </view>
    <up-modal
      :show="showClearModal"
      :title="$t('site.parameter.settings.tips.title')"
      :confirm-text="$t('time.confirm')"
      :cancel-text="$t('time.cancel')"
      :content="$t('site.parameter.settings.clear.fault.tips')"
      contentTextAlign="center"
      show-cancel-button
      @cancel="showClearModal = false"
      @confirm="handleClearFault"
    ></up-modal>
    <up-modal
      :show="showUnbindModal"
      :title="$t('site.parameter.settings.tips.title')"
      show-cancel-button
      :confirm-text="$t('time.confirm')"
      :cancel-text="$t('time.cancel')"
      @cancel="showUnbindModal = false"
      @confirm="handleUnbind"
    >
      <view class="unbind-modal">
        <text class="unbind-modal__content">{{
          $t("site.parameter.settings.clear.fault.again.tips")
        }}</text>
        <up-input
          class="unbind-modal__input"
          v-model.trim="inputName"
          color="#C9C9C9"
          shape="circle"
          border="none"
          :placeholder="siteName"
        ></up-input>
        <text class="unbind-modal__tips" v-if="errorMessage"
          >* {{ $t(errorMessage) }}</text
        >
      </view>
    </up-modal>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
import { onLoad } from "@dcloudio/uni-app";
const { t } = useI18n();
const ActionName = {
  CLEAR: "CLEAR",
  UNBIND: "UNBIND",
};
import Icon1 from "@/static/site-params-settings/cell-1-icon.png";
import Icon2 from "@/static/site-params-settings/cell-2-icon.png";
import Icon3 from "@/static/site-params-settings/cell-3-icon.png";
import Icon4 from "@/static/site-params-settings/cell-4-icon.png";
import Icon5 from "@/static/site-params-settings/cell-5-icon.png";
import Icon6 from "@/static/site-params-settings/cell-6-icon.png";
import Icon7 from "@/static/site-params-settings/cell-7-icon.png";
import Icon8 from "@/static/site-params-settings/cell-8-icon.png";
import apis from "@/apis/index.js";
const settings = computed(() => [
  // {
  //   title: t("site.parms.settings.cell-1"),
  //   path: "/pages/site-parameter-settings/peak-valley-time-setting",
  //   icon: Icon1,
  // },
  // {
  //   title: t("site.parms.settings.cell-2"),
  //   path: "/pages/site-parameter-settings/peak-valley-op-param-setting",
  //   icon: Icon2,
  // },
  // {
  //   title: t("site.parms.settings.cell-3"),
  //   path: "/pages/site-parameter-settings/peak-valley-peak-month-setting",
  //   icon: Icon3,
  // },
  // {
  //   title: t("site.parms.settings.cell-4"),
  //   path: "/pages/site-parameter-settings/peak-valley-tariff-setting",
  //   icon: Icon4,
  // },
  // {
  //   title: t("site.parms.settings.cell-5"),
  //   path: "/pages/site-parameter-settings/device-param-setting",
  //   icon: Icon5,
  // },
  // {
  //   title: t("site.parms.settings.cell-6"),
  //   path: "/pages/site-parameter-settings/ota-remote-upgrade",
  //   icon: Icon6,
  // },
  // {
  //   title: t("site.parms.settings.cell-7"),
  //   name: ActionName.CLEAR,
  //   icon: Icon7,
  // },
  {
    title: t("site.parms.settings.cell-8"),
    name: ActionName.UNBIND,
    icon: Icon8,
  },
]);

const siteName = ref(null);
const siteId = ref(null);
onLoad(({ name, id }) => {
  siteName.value = name;
  siteId.value = id;
});

const showClearModal = ref(false);
const showUnbindModal = ref(false);
const handleAction = (action) => {
  if (action.path) {
    uni.navigateTo({
      url: `${action.path}?name=${siteName.value}&id=${siteId.value}`,
    });
  } else {
    switch (action.name) {
      case ActionName.CLEAR:
        showClearModal.value = true;
        break;
      case ActionName.UNBIND:
        showUnbindModal.value = true;
        break;
    }
  }
};

const handleClearFault = async () => {
  showClearModal.value = false;
  try {
    await apis.setClearFault(siteId.value);
    uni.showToast({
      icon: "none",
      title: t("system.settings.clear.cache.successful"),
    });
  } catch (err) {
    uni.showToast({
      icon: "none",
      title: typeof err === "string" ? err : err.message,
    });
  }
};

const errorMessage = ref("");
const inputName = ref("");
const handleUnbind = async () => {
  if (!inputName.value) {
    errorMessage.value = "site.parameter.settings.clear.fault.warn-1";
  } else if (inputName.value !== siteName.value) {
    errorMessage.value = "site.parameter.settings.clear.fault.warn-2";
  } else {
    await apis.unBindTheSite({
      siteId: siteId.value,
    });
    uni.switchTab({
      url: "/pages/network/network",
    });
    showUnbindModal.value = false;
  }
};
</script>

<style lang="scss" scoped>
.site-parameter-settings {
  padding: 24rpx 32rpx;

  .settings {
    margin-top: 24rpx;

    & :deep(.u-cell) {
      background-color: #132034;
      border-radius: 16rpx;

      .u-cell__body {
        padding: 40rpx 32rpx;
      }

      .u-cell__left-icon-wrap {
        margin-right: 10rpx;
      }

      .u-cell__title-text {
        font-size: 32rpx;
        font-weight: normal;
        line-height: 32rpx;
        color: #ddd;
      }

      &:not(:last-child) {
        margin-bottom: 24rpx;
      }
    }

    .setting-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.unbind-modal {
  @include flex(column);

  &__input {
    margin-top: 33rpx;
    background-color: #222d49;
    padding: 24rpx 30rpx !important;

    .u-input__content__field-wrapper__field {
      font-size: 32rpx;
    }
  }

  &__tips {
    // font-family: Alibaba PuHuiTi 3.0;
    font-size: 24rpx;
    line-height: 32rpx;
    color: #fa3b3d;
    margin-top: 17rpx;
  }
}
</style>
